<template>
  <div>
    <el-dialog
      title="查看"
      width="1200px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="dialogBody">
        <div class="shoInfo">
          <div class="leftInfo">
            <el-image
              
              :src="shopDetail.store_pictures"
              :preview-src-list="[shopDetail.store_pictures]"
            >
            </el-image>
            <!-- <img :src="shopDetail.store_pictures" alt="" /> -->
            <div class="desc">
              <div class="shopTitle">{{ shopDetail.title }}</div>
              <p>
                <span class="lable">经营范围：</span>
                {{ shopDetail.business_scope }}
              </p>
              <p>
                <span class="lable">营业时间：</span>
                {{ shopDetail.business_hours }}
              </p>
              <p>
                <span class="lable">负责人：</span>
                {{ shopDetail.principal }}
              </p>
              <p>
                <span class="lable">联系电话：</span>
                {{ shopDetail.phone }}
              </p>
              <p>
                <span class="lable">店铺介绍：</span>
                {{ shopDetail.store_introduction }}
              </p>
              <p>
                <span class="lable">店铺地址：</span>
                {{ shopDetail.business_addr }}
              </p>
            </div>
          </div>
          <div class="rightInfo">
            <el-image
              style="width: 116px; height: 116px"
              :src="shopDetail.business_license"
              :preview-src-list="[shopDetail.business_license]"
            >
            </el-image>
            <!-- <img
              width="116"
              height="116"
              :src="shopDetail.business_license"
              alt=""
            /> -->
            <div>经营许可证</div>
          </div>
        </div>
        <div class="tablesCard bgfff">
          <div class="tablesCardTop">
            <div class="totalTxt">兑换记录</div>
          </div>
          <el-table
            :data="tableData"
            border
            size="small"
            height="454"
            style="width: 100%"
          >
            <el-table-column prop="time" label="兑换时间" align="center">
            </el-table-column>
            <el-table-column prop="name" label="操作人" align="center">
              <template slot-scope="scope"> </template>
            </el-table-column>
            <el-table-column prop="principal" label="兑换积分" align="center" />
            <el-table-column prop="phone" label="兑换人姓名" align="center">
            </el-table-column>
            <el-table-column
              prop="business_scope"
              label="联系电话"
              align="center"
            />
            <el-table-column
              prop="business_addr"
              label="消费备注"
              align="center"
            >
            </el-table-column>

            <el-table-column
              fixed="right"
              prop=""
              label="操作"
              align="center"
              width="70"
            >
              <template slot-scope="scope">
                <div class="operateBtns">
                  <el-link type="danger" @click="onBtns(4, scope.row)"
                    >撤销</el-link
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageBlock">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :current-page.sync="params.page"
              :page-size="params.limit"
              @size-change="
                (e) => {
                  params.limit = e;
                  getList();
                }
              "
              @current-change="
                (e) => {
                  params.page = e;
                  getList();
                }
              "
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { businessDetail } from "@/api/business";
export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    shopId: {
      type: Number,
    },
    shopInfo: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      shopDetail: {},
      tableData: [
        // {
        //   time: "2023-09-19 16:00:00",
        // },
        // {
        //   time: "2023-09-19 16:00:00",
        // },
        // {
        //   time: "2023-09-19 16:00:00",
        // },
        // {
        //   time: "2023-09-19 16:00:00",
        // },
        // {
        //   time: "2023-09-19 16:00:00",
        // },
        // {
        //   time: "2023-09-19 16:00:00",
        // },
        // {
        //   time: "2023-09-19 16:00:00",
        // },
        // {
        //   time: "2023-09-19 16:00:00",
        // },
        // {
        //   time: "2023-09-19 16:00:00",
        // },
        // {
        //   time: "2023-09-19 16:00:00",
        // },
      ],
      params: {
        page: 1,
        limit: 10,
      },
      total: 0,
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    console.log(this.shopId, ">>>>>shpo--");
    this.getDetail();
  },

  methods: {
    getDetail() {
      businessDetail({ id: this.shopId }).then((res) => {
        if (res.code == 200) {
          console.log(res.data, "<<<<>>>999");
          this.shopDetail = res.data;
        }
      });
    },

    handleClose() {
      this.$emit("handleClose");
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.dialogBody {
  .shoInfo {
    margin-right: 40px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .leftInfo {
      display: flex;
      img {
        margin-right: 20px;
        width: 218px;
        height: 218px;
      }
      .el-image {
        margin-right: 20px;
        width: 218px;
        height: 218px;
      }
      .desc {
        .shopTitle {
          margin-bottom: 14px;
          font-size: 18px;
          font-weight: 600;
          color: #222222;
        }
        p {
          line-height: 28px;
          color: #222222;
          .lable {
            display: inline-block;
            margin-right: 10px;
            width: 70px;
            text-align: right;
            color: #4f4f4f;
          }
        }
      }
    }
    .rightInfo {
      text-align: center;
      color: #4f4f4f;
      img {
        margin-bottom: 10px;
      }
    }
  }
  .tablesCard {
    padding: 0;
    .totalTxt {
      padding-left: 8px;
      position: relative;
      &::after {
        position: absolute;
        left: 0px;
        top: 5px;
        content: "";
        width: 2px;
        height: 12px;
        background: #1890ff;
      }
    }
  }
}
</style>
